<!--
 * @Author: hutong huareu980@163.com
 * @Date: 2023-05-31 16:30:30
 * @LastEditors: hutong huareu980@163.com
 * @LastEditTime: 2023-11-20 13:46:09
 * @FilePath: /smart-web-app/components/header.vue
 * @Description: 
-->
<template>
  <header class="header-box">
    <div class="container">
      <Transition :duration="550" name="nested">
        <div
          v-if="show"
          class="outer"
          @mouseenter="onMouseenter(show, 'enter')"
          @mouseleave="onMouseleave('leave')"
        >
          <div class="inner">
            <img src="~/assets/image/03.jpg" />
            <div class="inner-nav">
              <span>{{ t(currentNav.name) }}</span>
              <ul>
                <li v-for="item in currentNav.children" :item="item.id">
                  <nuxt-link
                    :to="localePath(item.url, locale)"
                    @click="onMouseleave('leave')"
                  >
                    {{ t(item.name) }}<span></span>
                  </nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </Transition>
      <!-- <span class="logo-text">SMART</span> -->
      <img src="~/assets/image/logo.jpg" alt="logo" class="logo" />
      <div></div>
      <div class="nav-box">
        <div class="lang-box">
          <NuxtLink
            :to="switchLocalePath('zh')"
            @click.prevent.stop="setLocale('zh')"
            >{{ t("zh") }}
          </NuxtLink>
          <span>|</span>
          <NuxtLink
            :to="switchLocalePath('en')"
            @click.prevent.stop="setLocale('en')"
            >{{ t("en") }}
          </NuxtLink>
        </div>
        <ul class="nav-list">
          <li
            v-for="item in tabList"
            :key="item.id"
            @mouseenter="onMouseenter(item.id)"
            @mouseleave="onMouseleave()"
          >
            <nuxt-link
              :to="localePath(item.url, locale)"
              @click="onMouseleave('leave')"
            >
              {{ t(item.name) }}<span></span>
            </nuxt-link>
          </li>
        </ul>
      </div>
    </div>
  </header>
  <div class="placeholder-box"></div>
</template>

<script setup lang="ts">
const { locale, setLocale, t } = useI18n();
const localePath = useLocalePath();
const switchLocalePath = useSwitchLocalePath();
const route = useRoute();
const current = ref("");
const tabList = ref([
  {
    id: "index",
    url: "/",
    name: "nav.home.name",
    children: [],
  },
  {
    id: "core",
    url: "/content/53/54",
    name: "nav.core.name",
    children: [
      {
        id: "1",
        url: "/content/53/54",
        name: "nav.core.child.item1",
      },
      {
        id: "2",
        url: "/content/53/55",
        name: "nav.core.child.item2",
      },
      {
        id: "3",
        url: "/content/53/56",
        name: "nav.core.child.item3",
      },
    ],
  },
  {
    id: "about",
    url: "/content/48/49",
    name: "nav.about.name",
    children: [
      {
        id: "1",
        url: "/content/48/49",
        name: "nav.about.child.item1",
      },
      {
        id: "2",
        url: "/content/48/50",
        name: "nav.about.child.item2",
      },
      {
        id: "3",
        url: "/content/48/51",
        name: "nav.about.child.item3",
      },
    ],
  },
  {
    id: "contact",
    url: "/content/60/61",
    name: "nav.contact.name",
    children: [
      {
        id: "1",
        url: "/content/60/61",
        name: "nav.contact.child.item1",
      },
      {
        id: "2",
        url: "/content/60/62",
        name: "nav.contact.child.item2",
      },
      {
        id: "3",
        url: "/content/60/63",
        name: "nav.contact.child.item3",
      },
    ],
  },
]);

const show = ref("");
const panelShow = ref("");
watch(
  () => route.name,
  (nVal: any) => {
    const routeName = nVal === "index" ? "" : nVal;
    current.value = routeName;
  },
  {
    immediate: true,
  }
);

const currentNav = computed<any>(() => {
  if (!show.value) return {};
  return tabList.value.find((item: any) => item.id === show.value);
});

const haveNav = (name: string) => {
  return current.value.indexOf(name) > -1;
};

const onChangeLang = (type: string) => {
  locale.value = type;
};

const onMouseenter = (id: string, flag?: string) => {
  if (id === "index") return;
  if (flag) {
    panelShow.value = flag;
  }
  show.value = id;
};
const onMouseleave = (flag?: string) => {
  const old = show.value;
  if (flag === "leave") {
    show.value = "";
    panelShow.value = "";
    return;
  }
  setTimeout(() => {
    if (panelShow.value) return;
    if (old === show.value) {
      show.value = "";
    }
  }, 300);
};
</script>
<style scoped lang="scss">
@font-face {
  font-family: "smart-text";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/sU9XvcEuSL1P/ndvoihpBQjfG.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/sU9XvcEuSL1P/HDiQjJ4aqxd2.woff")
      format("woff");
  font-display: swap;
}

.nested-enter-active,
.nested-leave-active {
  transition: all 0.3s ease-in-out;
}
/* delay leave of parent element */
.nested-leave-active {
  transition-delay: 0.25s;
}

.nested-enter-from,
.nested-leave-to {
  transform: translateY(-160px);
  opacity: 0;
}

.nested-leave-to {
  transition-delay: 0.2s;
}

/* we can also transition nested elements using nested selectors */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}
/* delay enter of nested element */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateY(-30px);
  /*
  	Hack around a Chrome 96 bug in handling nested opacity transitions.
    This is not needed in other browsers or Chrome 99+ where the bug
    has been fixed.
  */
  opacity: 0.001;
}

a {
  color: #666;
  text-decoration: none;
  &:hover {
    color: $primary;
    font-weight: bold;
    text-decoration: none;
  }
}
ul,
li {
  list-style: none;
}
.header-box {
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  z-index: 9;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  .container {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background-color: #fff;
    .outer {
      position: absolute;
      height: 210px;
      width: 100%;
      left: 0;
      top: 90px;
      z-index: -1;
      padding: 0 20px;
      box-sizing: border-box;
      background-color: #f6f6f6;
      .inner {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;

        img {
          height: 120px;
          width: 232px;
          object-fit: cover;
        }
        .inner-nav {
          height: 120px;
          margin-left: 20px;
          span {
            color: $primary;
          }
          ul {
            display: flex;
            align-items: center;
            margin-top: 20px;
            li {
              padding: 0 10px;
            }
          }
        }
      }
    }
  }
  .logo-text {
    font-size: 50px;
    font-weight: bold;
    font-family: "smart-text";
    letter-spacing: 2px;
  }
  .logo {
    height: 45px;
    width: 227px;
    object-fit: contain;
    // object-position: 0px -50px;
    // overflow: hidden;
  }
  .nav-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .lang-box {
      span {
        &:nth-child(1) {
          cursor: pointer;
        }
        &:nth-child(2) {
          margin: 0 10px;
        }
        &:nth-child(3) {
          cursor: pointer;
        }
      }
      .lang-active {
        color: $primary;
      }
    }
    .nav-list {
      display: flex;
      margin-top: 10px;
      li {
        margin: 0 20px;
        cursor: pointer;
        a {
          position: relative;
          display: block;
          font-size: 16px;
          font-weight: 600;
          height: 37px;
          line-height: 42px;
          text-align: center;
          color: #565656;
          border-bottom: 2px solid #fff;
          transition: all 500ms ease 0ms;
          span {
            position: absolute;
            width: 8px;
            height: 8px;
            bottom: -6px;
            left: 44%;
            background-color: #fff;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(45deg);
            transition: all 500ms ease 0ms;
          }
        }
        a {
          &:hover {
            color: $primary;
            border-bottom-color: $primary;
            span {
              border-color: $primary;
            }
          }
        }
      }
      // .nav-active {
      //   color: $primary;
      //   font-weight: bold;
      // }
    }
  }
}
.placeholder-box {
  height: 90px;
}
</style>
